<template>
    <div>
        <AddVideoTest ref="video_test" />
        <div class="com_box">
            <div class="sch_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <div class="sch_tab active">千川任务</div>
                    <div class="sch_tab" @click="switchTab('/tk_taks_list')">TK任务</div>
                </div>
                <div class="flexbox flexcenter">
                    <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="toCreatPlan">批量创建</el-button>
                </div>
            </div>
            <div class="sch_rank">
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <div class="reset_btn" @click="resetFun" style="margin-left:0">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                </div>
            </div>
            <div class="sch_hight flexbox" v-if="showrank">
                <div class="flexbox flexcenter max_width">
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">创建状态</span>
                            <span class="drop_title">{{status_text.length>0?status_text.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':status_text.length>0}">已选 {{status_text.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilter('status_text','status')" v-if="status_text.length>0">清除已选</el-link>
                            </div>
                            <el-radio-group v-model="queryInfo.status" class="check_style" @change="changeStatus">
                                <el-radio :label="item.id" v-for="(item,index) in statusList" :key="index">
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-radio>
                            </el-radio-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="flexbox flexcenter" style="width:711px"> 
                    <el-date-picker style="width:260px;margin-left:5px" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" clearable size="small" @change="getDataList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <el-input style="width:216px;margin-left:12px" clearable size="small" placeholder="任务名称" suffix-icon="el-icon-search" v-model="queryInfo.name" @change="getDataList(1)">
                    </el-input>
                    <el-input style="width:216px;margin-left:12px" clearable size="small" placeholder="创建人" suffix-icon="el-icon-search" v-model="queryInfo.username" @change="getDataList(1)">
                    </el-input>
                </div>
            </div>
        </div>
        <div class="com_box" style="margin-top:12px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="table_box">
                <el-table :data="tableData" class="com_table" ref="straRef" height="700px" :row-key="(row)=>{ return row.id}" @selection-change="selectStrategy">
                    <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                    </el-table-column>
                    <el-table-column prop="id" label="编号" width="100">
                    </el-table-column>
                    <el-table-column prop="name" label="任务名称" min-width="170">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.name" placeholder="" @blur="editTaskName(scope.row,scope.$index)" v-focus size="mini" v-if="scope.row.remarkshow"></el-input>
                            <div class="flexbox flexcenter remark_hover" v-else>{{scope.row.name}}<span class="icon_btn flexbox flexcenter flexjust"><img src="../../assets/img/edit_icon2.svg" alt="" @click="showRemark(scope.$index)"></span></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nickname" label="创建人" min-width="100"></el-table-column>
                    <el-table-column prop="name" label="营销目标" width="180">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter" v-if="scope.row.target=='VIDEO_PROM_GOODS'">
                                <img src="../../assets/img/live_icon.svg" alt="" style="margin-right:8px">
                                短视频/图文带货
                            </div>
                            <div class="flexbox flexcenter" v-else>
                                <img src="../../assets/img/live_icon2.svg" alt="" style="margin-right:8px">
                                直播带货
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="推广方式" width="130">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter" v-if="scope.row.promotion_way=='STANDARD'">
                                <img src="../../assets/img/specialty_icon.svg" alt="" style="margin-right:8px">
                                专业推广
                            </div>
                            <div class="flexbox flexcenter" v-else-if="scope.row.promotion_way=='SIMPLE'">
                                <img src="../../assets/img/specialty2_icon.svg" alt="" style="margin-right:8px">
                                极速推广
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="plan_num" label="广告计划" width="100">
                    </el-table-column>
                    <el-table-column prop="originality_num" label="创意" width="80">
                    </el-table-column>
                    <el-table-column prop="name" label="计划数量" width="110">
                        <template slot-scope="scope">
                            <el-tooltip content="计划失败数量" placement="top">
                                <div slot="content">
                                    <div class="status_height">创建成功：<span class="text_green font_14">{{scope.row.plan_success_num}}</span></div>
                                    <div class="status_height">创建失败：<span class="text_red font_14">{{scope.row.plan_error_num}}</span></div>
                                </div>
                                <div class="flexbox flexcenter status_type_num">
                                    <span class="status_line text_green">{{scope.row.plan_success_num}}</span>
                                    <span class="status_line text_red">{{scope.row.plan_error_num}}</span>
                                    <!-- <span class="status_line text_gray">8</span> -->
                                    <!-- <span class="status_line text_red">{{scope.row.plan_error_num}}</span> -->
                                    <!-- <span class="status_line text_yellow">8</span> -->
                                </div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="last_date" label="任务进度" width="150">
                        <template slot-scope="scope">
                            <el-link type="danger" v-if="scope.row.status==1" :underline="false">未开始</el-link>
                            <el-link type="primary" v-else-if="scope.row.status==3" :underline="false">创建完成</el-link>
                            <el-link type="danger" v-else-if="scope.row.status==4" :underline="false">创建失败</el-link>
                            <el-progress :percentage="scope.row.process" v-else></el-progress>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="user_id" label="创建人" width="100">
                    </el-table-column> -->
                    <el-table-column prop="last_date" label="创建时间" width="120">
                    </el-table-column>
                    <el-table-column prop="execution_time" label="执行时间" width="120">
                    </el-table-column>
                    <el-table-column prop="product_num" label="操作" width="180" align="center" fixed="right">
                        <template slot="header" slot-scope="scope">
                            操作
                            <el-link type="danger" v-if="hasChecked.length>0" :underline="false" style="margin-left:10px;margin-top:-3px" @click="delectBukTask">批量删除</el-link>
                        </template>
                        <template slot-scope="scope">
                            <el-button type="text" @click="taskList(scope.row)">详情</el-button>
                            <el-button type="text" @click="copyTask(scope.row)">复制</el-button>
                            <el-dropdown style="margin-left:5px">
                                <el-button type="text" style="padding:0" icon="el-icon-more" class="role_icon"></el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item @click.native="addVideoTest(scope.row)">
                                        <div class="flexbox flexcenter">
                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M15.5 8H4.5L8.5 4" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                <path d="M4.5 11.5H15.5L11.5 15.5" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                            <span class="font_14 color_01" style="margin-left:5px">同步素材测试</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item @click.native="deletTask(scope.row)">
                                        <div class="flexbox flexcenter">
                                            <img src="../../assets/img/del_icon.svg" alt="">
                                            <span class="font_14 color_01" style="margin-left:5px">删除</span>
                                        </div>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <!-- <el-button type="text" @click="deletTask(scope.row)">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page_box flexbox flexcenter" v-if="total>0">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import AddVideoTest from "./AddVideoTest";
export default {
    components: {
        AddVideoTest,
    },
    name: "",
    data() {
        return {
            timer: null,
            queryInfo: {
                status: "",
                page: 1,
                limit: 20,
                name: "",
                date: [],
                username:"",
            },
            hasChecked: [],
            status_text: [],
            statusList: [
                {
                    id: 3,
                    nickname: "执行完毕",
                },
                {
                    id: 1,
                    nickname: "等待创建",
                },
                {
                    id: 2,
                    nickname: "正在执行",
                },
                {
                    id: 4,
                    nickname: "创建失败",
                },
            ],
            showrank: true,
            loading: false,
            total: 1,
            setpage: 1,
            tableData: [],
            is_process: false,
        };
    },
    created() {
        this.getDataList(1);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            clearInterval(this.timer);
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/Task/task_list",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                for (let i in res.data.list) {
                    res.data.list[i].remarkshow = false;
                }
                this.tableData = res.data.list;
                this.total = res.data.count;
                // this.getProcess(res.data.list);
                this.getSpeed(this.tableData);
            }
        },

        // 获取进度
        async getProcess(list) {
            for (let i in list) {
                if (list[i].status == 2) {
                    const { data: res } = await this.$http.post(
                        "launch/Task/get_speed",
                        {
                            id: list[i].id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        if (res.data.speed) {
                            list[i].process = Math.floor(
                                Number(res.data.speed) * 100
                            );
                            this.$set(this.tableData, i, list[i]);
                            this.tableData[i].plan_success_num =
                                res.data.plan_success_num;
                            this.tableData[i].plan_error_num =
                                res.data.plan_error_num;
                            if (res.data.speed == "1.00") {
                                this.tableData[i].status = 3;
                            }
                        } else {
                            this.tableData[i].process = res.data.speed;
                        }
                    }
                }
            }
        },

        getSpeed(list) {
            let that = this;
            that.timer = window.setInterval(function () {
                let is_start =
                    list.filter((item) => {
                        return item.status == 2;
                    }).length > 0;
                if (is_start) {
                    that.getProcess(list);
                } else {
                    clearInterval(that.timer);
                }
            }, 2000);
        },

        // 备注
        showRemark(index) {
            this.tableData[index].remarkshow = true;
        },
        async editTaskName(row, index) {
            const { data: res } = await this.$http.post(
                "launch/Task/task_name_edit",
                {
                    id: row.id,
                    name: row.name,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.tableData[index].remarkshow = false;
                this.getDataList(this.setpage);
            }
        },

        async copyTask(row) {
            const { data: res } = await this.$http.post(
                "launch/Task/task_copy",
                {
                    id: row.id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                let copyJson = JSON.parse(res.data.json);
                copyJson.step = 1;
                window.sessionStorage.setItem(
                    "dataForm",
                    JSON.stringify(copyJson)
                );
                this.$router.push({
                    path: "/launch/Launch/plan_make",
                });
            }
        },

        // 批量选择
        selectStrategy(val) {
            var ids = [];
            val.forEach((element) => {
                ids.push(element.id);
            });
            this.hasChecked = ids;
        },

        // 删除
        deletTask(row) {
            this.$confirm("是否要删除该任务?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "launch/Task/task_del",
                        {
                            id: row.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.getDataList(1);
                    }
                })
                .catch(() => {});
        },

        // 批量删除
        delectBukTask() {
            this.$confirm("是否要删除选中任务?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "launch/Task/task_del",
                        {
                            id: this.hasChecked,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.getDataList(1);
                        this.closeHasStraCheck();
                    }
                })
                .catch(() => {});
        },

        // 同步素材测试
        addVideoTest(row) {
            this.$refs.video_test.getData(row.id);
        },

        // 时长筛选
        changeStatus() {
            let val = this.statusList.filter((item) => {
                if (item.id == this.queryInfo.status) {
                    return item;
                }
            });
            this.status_text = [val[0].nickname];
            this.getDataList(1);
        },

        // 清除已选
        clearFilter(text, id) {
            this.queryInfo[id] = "";
            this[text] = [];
            this.getDataList(1);
        },

        // 跳转计划列表
        taskList(row) {
            // this.$router.push({
            //     path: "/planList",
            //     query: {
            //         id: row.id,
            //         type: row.target,
            //     },
            // });
            let routeUrl = this.$router.resolve({
                path: "/planList",
                query: {
                    id: row.id,
                    type: row.target,
                },
            });
            window.open(routeUrl.href, "_blank");
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
            });
        },

        // 重置
        resetFun() {
            this.queryInfo.status = "";
            this.queryInfo.name = "";
            this.queryInfo.username = "";
            this.queryInfo.date = [];
            this.status_text = [];
            this.closeHasStraCheck();
            this.getDataList(1);
        },

        // 关闭批量选择
        closeHasStraCheck() {
            this.hasChecked = [];
            this.$refs.straRef.clearSelection();
        },

        // 跳转创建计划
        toCreatPlan() {
            this.$router.push({
                path: "/launch/Launch/plan_make",
            });
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
};
</script>


<style scoped>
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
.status_height {
    line-height: 26px;
}
.status_line {
    width: 34px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    position: relative;
}
.status_line::after {
    content: "";
    position: absolute;
    height: 8px;
    border-left: 1px solid #ebebeb;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.status_line:last-child::after {
    display: none;
}
.status_type_num {
    width: 70px;
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 2px;
}
.remark_hover .icon_btn {
    display: none;
}
.remark_hover:hover .icon_btn {
    display: flex;
    margin-left: 5px;
}
.role_icon {
    transform: rotate(-90deg);
}
</style>

<style>
/* .el-table{
    position: relative;
    overflow: visible;
}
.el-table .el-table__header-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: -12px;
    z-index: 2;
}
.el-table .el-table__fixed,.el-table .el-table__fixed-right {
    overflow: visible;
}
.el-table .el-table__fixed .el-table__fixed-header-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: -12px;
    left: 0;
    z-index: 4;
    overflow: hidden;
}
.el-table .el-table__fixed-right .el-table__fixed-header-wrapper{
    position: -webkit-sticky;
    position: sticky;
    top: -12px;
    right: 0;
    z-index: 4;
    overflow: hidden;
}
.el-table .el-table__fixed .el-table__fixed-body-wrapper, .el-table .el-table__fixed .el-table__fixed-footer-wrapper {
    right: 0;
    overflow: hidden;
}
.el-table .el-table__fixed-right .el-table__fixed-body-wrapper, .el-table .el-table__fixed-right .el-table__fixed-footer-wrapper {
    left: 0;
    overflow: hidden;
} */
</style>

